<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="流程名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入流程名" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRangeCreateTime" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="任务编号" align="center" prop="id" width="320" />
      <el-table-column label="任务名称" align="center" prop="name" />
      <el-table-column label="所属流程" align="center" prop="processInstance.name">
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.processInstance.name }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname">
        <template slot-scope="scope">
          <el-tag type="info">{{ scope.row.processInstance.startUserNickname }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="version" width="80">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)">详情</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleExamine(scope.row)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog title="干预审批" :visible.sync="showBpmnOpen" width="60%" append-to-body>
      <el-form label-width="100px">
        <el-form-item label="审批建议" prop="comment">
          <el-input type="textarea" v-model="comment" placeholder="请输入审批建议" />
        </el-form-item>
      </el-form>
      <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
        <el-button icon="el-icon-edit-outline" type="success" round plain size="mini" @click="handleAudit1(true)">通过</el-button>
        <el-button icon="el-icon-circle-close" type="danger" round plain size="mini" @click="handleAudit1(false)">不通过</el-button>
        <el-button icon="el-icon-edit-outline" type="primary" round plain size="mini" @click="handleUpdateAssignee()">转办</el-button>
        <el-button icon="el-icon-edit-outline" type="primary" round plain size="mini" @click="handleDelegate()">委派</el-button>
        <el-button icon="el-icon-refresh-left" type="warning" round plain size="mini" @click="handleBack()">退回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTodoTaskPage, getTaskListByProcessInstanceId, rejectTask, approveTaskIntervene } from '@/api/bpm/task'

export default {
  name: 'Todo',
  components: {},
  data() {
    return {
      runningTasks: [],
      tasks: [],
      showBpmnOpen: false,
      newId: '',
      comment: '',
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 待办任务列表
      list: [],
      // 查询参数
      dateRangeCreateTime: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleExamine(row) {
      this.getTaskInfo(row.processInstance.id)

      this.newId = row.id
      this.showBpmnOpen = true
    },
    getTaskInfo(id) {
      getTaskListByProcessInstanceId(id).then((response) => {
        // 审批记录

        this.tasks = response.data
        // 排序，将未完成的排在前面，已完成的排在后面；
        this.tasks.sort((a, b) => {
          // 有已完成的情况，按照完成时间倒序
          if (a.endTime && b.endTime) {
            return b.endTime - a.endTime
          } else if (a.endTime) {
            return 1
          } else if (b.endTime) {
            return -1
            // 都是未完成，按照创建时间倒序
          } else {
            return b.createTime - a.createTime
          }
        })

        var taskQu = JSON.parse(JSON.stringify(this.tasks))
        this.runningTasks = []

        if (taskQu.length < 1) {
          this.showBpmnOpen = false
          this.$modal.msgError('很抱歉，没有找到对应的任务流程')
          return
        }
        taskQu.forEach((task) => {
          if (task.result !== 1) {
            // 只有待处理才需要
            return
          }
          this.runningTasks.push({ ...task })
        })
      })
    },
    /** 处理审批退回的操作 */
    handleDelegate() {
      this.$modal.msgError('暂不支持【委派】功能，可以使用【转派】替代！')
    },
    /** 处理审批退回的操作 */
    handleBack() {
      this.$modal.msgError('暂不支持【退回】功能！')
    },
    /** 处理审批通过和不通过的操作 */
    handleAudit1(pass) {
      const data = {
        id: this.runningTasks[0].id,
        comment: this.comment
      }
      if (pass) {
        approveTaskIntervene(data).then((response) => {
          this.showBpmnOpen = false
          this.$modal.msgSuccess('审批通过成功！')
          this.getList()
        })
      } else {
        rejectTask(data).then((response) => {
          this.$modal.msgSuccess('审批不通过成功！')
        })
      }
    },
    /** 处理转派审批人 */
    handleUpdateAssignee() {
      // 设置表单
      this.resetUpdateAssigneeForm()
      // 设置为打开
      this.updateAssignee.open = true
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // 处理查询参数
      let params = { ...this.queryParams }
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime')
      getTodoTaskPage(params).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreateTime = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 处理审批按钮 */
    handleAudit(row) {
      this.$router.push({ path: '/activiti/process/detail', query: { id: row.processInstance.id } })
    }
  }
}
</script>
